<template>
    <div :id="id"></div>
</template>

<script>
import echarts from "echarts";

export default {
    name: "simple-bar",
    props: ["id", "is_number", "data", "is_precent", "is_double", "is_line", "many_color"],
    methods: {
        drawCharts() {
            let my_chart = echarts.init(document.getElementById(this.id));

            let option = {
                grid: {
                    left: '5%',
                },
                legend: {
                    data: this.data.name,
                    right: "10%",
                    top: "8%"
                },
                xAxis: {
                    type: "category",
                    interval: 0,
                    data: this.data.x,
                    axisLabel: {
                        interval: 0,
                        formatter: (value, index) => {
                            if (value.length > 3 && !this.is_number) {
                                return (
                                    value.substring(0, 2) +
                                    "\n" +
                                    value.substring(2)
                                );
                            } else {
                                return value;
                            }
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 12,
                            color: "#131d2d"
                        }
                    }
                },
                series: [],
                color: this.data.color
            };

            this.data.data.forEach((el, index) => {
                if (el) {
                    option.series.push({
                        data: el,
                        type: "bar",
                        label: {
                            normal: {
                                show: true,
                                position: "top"
                            }
                        },
                        barWidth: 15,
                        itemStyle: {
                            barBorderRadius: [5, 5, 0, 0],
                            normal: {
                                // color: (param) => {
                                //     return this.data.color[param.dataIndex]
                                // }
                            }
                        }
                    });
                }
                if (this.many_color) {
                    option.series[index].itemStyle.normal.color = (param) => {
                        return this.data.color[param.dataIndex]
                    }
                }
                if (this.data.name != undefined) {
                    option.series[index].name = this.data.name[index];
                }
            });

            if (this.is_precent) {
                option.yAxis.axisLabel.formatter = "{value}.0%";
                option.series.forEach((el, index, arr) => {
                    el.label.formatter = "{b}%";
                    el.label.normal.formatter = "{c}.0%";
                });
            }

            if (this.is_double) {
                option.yAxis = [
                    {
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: "#131d2d"
                            }
                        },
                        min: 0,
                        max: 120
                    },
                    {
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: "#131d2d"
                            },
                            formatter: "{value}%"
                        },
                        min: 0,
                        max: 120
                    }
                ];
            }

            if (this.is_line) {
                option.series[option.series.length - 1].type = "line";
            }
            my_chart.setOption(option);
        }
    },
    mounted() {
        this.drawCharts();
    }
};
</script>

<style>
</style>
